<template>
	<div class="recharge" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="充值中心"></back-header>
		<section class="recharge-list" id="htmlDataList">
			<!-- <app-loading v-if="!alipayList"></app-loading>
			<div v-else-if="alipayList.length == 0" style="text-align: center;padding:100px 0;font-size:16px;color:#555;">没有数据</div>
			<div v-else class="recharge-item flex" v-for="item in alipayList" @click="popPayTips(item.rmb)">
				<img class="icon-money" src="../assets/images/chongzhizhongxinjinbi.png">
				<div class="diamond">
					<span>{{item.diamond}}金币</span><span style="color:#a9a9a9;font-size:14px;">赠送{{item.present}}金币</span>
				</div>
				<button type="button" class="align-left inline-block">￥{{item.rmb}}</button>
			</div> -->
			
            <div class="recharge-item flex" data-rmb="10" @click="popPayTips(10)"><img class="icon-money" src="../assets/images/chongzhizhongxinjinbi.png">
                <div class="diamond"><span>10金币</span><span style="color:#a9a9a9;font-size:14px;">赠送0金币</span></div>
                <button type="button" class="align-left inline-block">￥1</button>
            </div>
            <div class="recharge-item flex" data-rmb="60" @click="popPayTips(60)"><img class="icon-money" src="../assets/images/chongzhizhongxinjinbi.png">
                <div class="diamond"><span>60金币</span><span style="color:#a9a9a9;font-size:14px;">赠送0金币</span></div>
                <button type="button" class="align-left inline-block">￥6</button>
            </div>
            <div class="recharge-item flex" data-rmb="120" @click="popPayTips(120)"><img class="icon-money" src="../assets/images/chongzhizhongxinjinbi.png">
                <div class="diamond"><span>130金币</span><span style="color:#a9a9a9;font-size:14px;">赠送10金币</span></div>
                <button type="button" class="align-left inline-block">￥12</button>
            </div>
            <div class="recharge-item flex" data-rmb="300" @click="popPayTips(300)"><img class="icon-money" src="../assets/images/chongzhizhongxinjinbi.png">
                <div class="diamond"><span>330金币</span><span style="color:#a9a9a9;font-size:14px;">赠送30金币</span></div>
                <button type="button" class="align-left inline-block">￥30</button>
            </div>
            <div class="recharge-item flex" data-rmb="500" @click="popPayTips(500)"><img class="icon-money" src="../assets/images/chongzhizhongxinjinbi.png">
                <div class="diamond"><span>550金币</span><span style="color:#a9a9a9;font-size:14px;">赠送50金币</span></div>
                <button type="button" class="align-left inline-block">￥50</button>
            </div>
		</section>
	</div>
</template>

<script type="text/javascript">
	import appLoading from '../components/loading'
	import backHeader from '../components/backHeader'
	export default{
		name:"appRecharge",
		components:{backHeader,appLoading},
		data(){
			return {
				alipayList:"",
			}
		},	
		mounted(){
			this.payList();
		},
		methods:{
			payList(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/V1/User/payList`,{token:this.$store.state.userInfo.token,client:2,version:1}).then((response) => {
		              console.log(response)
		              this.alipayList = response.data.alipayList;
		  		 })
			},
			getCoin() {
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/User/getCoinInfo`,{token:this.$store.state.userInfo.token,uid:this.$store.state.userInfo.uid}).then((response) => {
		            console.log(response)
	                this.$store.commit("getCoinInfo",response.data)
	                this.$router.go(-1)
		  		}).catch((err) => {
		  			alert("err"+err);
		  		})
		    },
			popPayTips(price){
				var that = this;
				window.popPayTips({
	                version: 'v2',
	                defaultScore : price,
	                appid : 1106718756
	            });
	            window.__paySuccess = function(){
	            	that.$jsonp(`${that.URL_PREFIX}/OpenAPI/v1/Order/wanbaPay`,{
						count: price,
			            token: that.$store.state.userInfo.token,
			            openid: that.$store.state.openid,
			            zoneid: that.$store.state.platform,
			            openkey: that.$store.state.openkey,
					}).then((response) => {
			              console.log(response)
			              if(response.code == 0) {
			                    //支付成功执行
			                    mqq.ui.showTips({
			                        text: "支付成功",
			                        iconMode: 2
			                    })
			                    setTimeout(() => {
			                        that.getCoin();
			                    },3000);
			                }
			  		 }).catch((err) => {
				  		alert("err"+JSON.stringify(err));
				  	 })

			    }

			    window.__payError = function(){
			        //支付失败执行
			        mqq.ui.showTips({
			            text: "支付失败",
			            iconMode: 2
			        })
			    }

			    window.__payClose = function(){
			        //关闭对话框执行,IOS下无效
			        mqq.ui.showTips({
			            text: "取消支付",
			            iconMode: 2
			        })
			    }
			}
		}
	}

</script>

<style lang="less" scoped>
	.align-left {
		margin-left:auto;
	}
	.recharge-list {
	    width: 95%;
	    margin: 0 auto
	}
	.recharge-item {
	    width: 100%;
	    padding: 10px 0;
	    border-radius: 5px;
	    margin: 10px auto;
	    border-bottom: 1px solid #f4f4f4;
	    .diamond span {
		    display: block;
		    font-size: 18px;
		}
		.icon-money {
		    width: 30px;
		    margin-right: 10px;
		}
		button {
		    width: auto;
		    padding: 5px;
		    min-width: 60px;
		    height: 35px;
		    background: 0 0;
		    border: none;
		    text-align: center;
		    outline: 0;
		    font-size: 16px;
		    border-radius: 6px;
		    color: #585656;
		    background: #f9d22c
		}

	}
</style>